<template>
  <div class="edit">
    <van-nav-bar
      title=""
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      编辑信息
    </van-divider>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
      />
      <van-field
        v-model="phone"
        type="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
      />
      <van-field
        v-model="gender"
        type="gender"
        name="性别" 
        label="性别"
        placeholder="性别"
      />
      <van-field
        v-model="age"
        type="age"
        name="年龄"
        label="年龄"
        placeholder="年龄"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
import url from '../tools/url'
export default {
  name: 'Edit',
  data () {
    return {
      id:"",
      username:"",
      password:"",
      phone:"",
      gender:"",
      age:"",
    }
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1);
    },
    onSubmit(){
      var token = sessionStorage.getItem("token");
      var str = `id=${this.id}&token=${token}&phone=${this.phone}&password=${this.password}&name=${this.name}&age=${this.age}&gender=${this.gender}`;
      this.axios.post("api3"+url.EDIT,str).then(res=>{
        console.log(res);
        if(res.data.code == 200){
          sessionStorage.setItem("token",res.data.data.token);
          this.$store.commit("save",res.data.data);
          this.$router.push("/mine");
          Toast(res.data.message);
        }else{
          Toast(res.data.message);
        }
      })

    }
  },
  mounted() {
    this.id = this.$route.query.id;
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.classify{
  margin-top: 45px;
  margin-bottom: 62px ;
}
</style>
